<template>
  <view class=" chef_list">
      <view class="item"  v-for="item in chefList" :key="item.id" @click="goDetail(item)" >
        <image :src="item.avatar" mode="aspectFill"></image>
        <view class="desc">
          <view class="bigText">{{ item.name }}
            <text v-if="item.rating===1">（初级）</text>
            <text v-else-if="item.rating===2"> （中级）</text>
            <text v-else> （高级）</text>
          </view>
          <view>
            工作经验:{{ item.experience }}年
          </view>

          <view class="price">
            价格:{{ item.price }}元/小时
          </view>

          <view>个人介绍: {{ item.specialty }}</view>
        </view>

    </view>
  </view>
</template>

<script>

import {
  chef_list
} from '@/api/chef.js'

export default {
  data() {
    return {
      chefList: [],

    };
  },
  onLoad() {
    this.getChefList();
  },
  onShow() {
    this.getChefList();
  },
  methods: {
    getChefList() {
      let params = {}
      params.status = 2
      chef_list(params).then(res => {
        this.chefList = res.data
      })
    },

    goDetail(item) {
      uni.navigateTo({
        url: '/pages/chefDetail/chefDetail?id=' + item.id
      })
    }
  }
}
</script>

<style lang="less">


.chef_list{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16upx;
}

.item {
  width: 90%;
  display: flex;
  border-radius: 12upx;
  flex-direction: row;
  align-items: center;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
  padding:16upx;

  image {

    width: 260upx;
    height: 200upx;
    border-radius: 30upx;
  }

  .desc {
    width: 100%;
    height: 100%;
    margin-left: 24upx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.bigText {
  font-size: 36upx;
  font-weight: bold;
  font-family: "宋体",serif;
}


</style>